// rce 可以生成一个类组件，类组件比较古老，现在一般以函数组件为主
import React, { Component } from 'react'
import Appsonson from './appsonson';
// jsx 语法是html，和js的混写，遇到<>解析html，遇到{}解析js
class Appson extends Component {
 // 在类组件中，this指向当前组件的实例
  state = {
      name :"zhangsan",
      flag:false,
      arr:[
          {
              name:"zhangsan",
              age:10
          },
          {
              name:"lisi",
              age:"30"
          },
          {
              name:"wangwu",
              age:60
          }
      ]
  }
  fn(data) {
     console.log(data,this);
     this.setState({ // 在类组件中必须使用this.setState
         name:"lisi"
     })
  }
// call ,applay ,bind 
//   fn = function() {
//       console.log(this);
//   }
  render() {
    console.log(this.fn);
    return (
      <div>{this.state.name}
         {
             this.state.flag ? <h5>{this.state.name}</h5> :""
         }
         <button onClick={this.fn.bind(this,"aaa")}>点击我修改name</button>
         {
             this.state.arr && this.state.arr.length?   this.state.arr.map((item,index)=>{
                 return <div key={index}>
                        <h4>{item.name}</h4>
                        <h4>{item.age}</h4>
                 </div>
             }):"暂无数据"
         }
        <hr />
        <Appsonson></Appsonson>
      </div>
    )
  }
}

export default Appson